<template>
	<view v-show="show">
		<view class="add-container" v-show="!showEmpty">

			<u-form :model="form" :labelStyle="lstyle" labelPosition="left" label-width="110" label-align="left"
				class="form-container">
				<view class="header">
					<view class="logo">访</view>
					<view class="title">被访人信息</view>
				</view>

				<u-form-item label="被访人姓名" prop="visitedNameLabel" borderBottom>
					<u-input fontSize="14px"  readonly v-model="form.visitedNameLabel" border="none" placeholder="请输入被访人姓名"></u-input>
				</u-form-item>
				<u-form-item label="被访人电话" prop="visitedPhone" borderBottom>
					<u-input fontSize="14px"  readonly type="number" v-model="form.visitedPhone" border="none"
						placeholder="请输入被访人电话"></u-input>
				</u-form-item>
			</u-form>

			<u-form :model="form" :labelStyle="lstyle" labelPosition="left" label-width="110" label-align="left"
				class="form-container mg-top30">
				<view class="header">
					<view class="logo">客</view>
					<view class="title">访客信息</view>
				</view>

				<u-form-item label="访客姓名" prop="appointName" borderBottom>
					<u-input fontSize="14px"  readonly v-model="form.appointName" border="none" placeholder="请输入访客姓名"></u-input>
				</u-form-item>
				<u-form-item label="访客电话" prop="appointPhone" borderBottom>
					<u-input fontSize="14px"  readonly type="number" v-model="form.appointPhone" border="none" maxlength="11"
						placeholder="请输入访客电话"></u-input>
				</u-form-item>
				<u-form-item label="访客单位" prop="appointDept"  borderBottom>
					<u-input fontSize="14px"  readonly v-model="form.appointDept" border="none" maxlength="11"
						placeholder=""></u-input>
				</u-form-item>
				<u-form-item label="来访人数" prop="num"  borderBottom>
					<u-input fontSize="14px" readonly type="number" v-model="form.num" border="none" maxlength="5"
						placeholder="请输入来访人数"></u-input>
				</u-form-item>
				<!-- <u-form-item label="访客身份证" prop="cardNo" borderBottom>
					<u-input fontSize="14px"  readonly type="idcard" v-model="form.cardNo" border="none" maxlength="18"
						placeholder=""></u-input>
				</u-form-item> -->

				<u-form-item label="到访日期" prop="appointTime" borderBottom @click="showPicker">
					<u-input fontSize="14px"  readonly readonly v-model="form.appointTime" border="none" maxlength="10"
						placeholder="请输入到访日期"></u-input>
				</u-form-item>

				<u-form-item label="来访事由" prop="appointRemark" borderBottom>
					<u-input fontSize="14px"  readonly readonly v-model="form.appointRemark" border="none" maxlength="10"
						placeholder="请输入来访事由"></u-input>
				</u-form-item>
			</u-form>

			<u-form v-if="form.list.length > 0" :model="form" :labelStyle="lstyle" labelPosition="left" label-width="110"
				label-align="left" class="form-container mg-top30">
				<view class="header">
					<view class="logo">同</view>
					<view class="title">同行人</view>
				</view>

				<u-cell-group>
					<u-cell v-for="(person,index) in form.list" @click="viewCompanions(index)" :title="person.name"
						:isLink="true"></u-cell>
				</u-cell-group>
			</u-form>



			<view class="submit">
				<u-button color="#920076" @click="agreeOrReject('1')">同 意</u-button>
				<u-button color="#b4141f" @click="agreeOrReject('2')">拒 绝</u-button>
			</view>
		</view>
		<view class="empty" v-show="showEmpty">
			<u-empty icon="/static/empty.png" iconColor="#ccc" mode="data" text="暂无审核数据">
			</u-empty>
		</view>
		<u-notify ref="uNotify" message="审核成功"></u-notify>
	</view>
</template>

<script>
	import {
		formatDate,
		getOpenid,
		desensitizeName
	} from "@/common/permission.js"
	export default {
		data() {
			return {
				show: false,
				showEmpty: false,
				list: [], //同行人信息
				form: {
					id: '',
					visitedNameLabel:'',
					visitedName: '',
					visitedPhone: '',
					appointName: '',
					appointPhone: '',
					cardNo: '',
					appointDept: '',
					appointTime: '',
					num: '',
					type: '',
					list: []
				},
			}
		},
		onShow() {

		},
		computed: {
			lstyle() {
				return {
					fontSize: '32rpx'
				}
			}
		},
		async onLoad(e) {
			this.openid = await getOpenid()
			this.id = e.id
			if (!this.id) {
				this.showEmpty = true
				this.show = true
			} else {
				this.loadData()
			}
		},
		methods: {
			viewCompanions(index){
				if (this.form.list && this.form.list.length > 0) {
					uni.setStorageSync("viewCompanions", this.form.list)
				}
				uni.navigateTo({
					url: "/pages/aprov/companions?index=" + index
				})
			},
			agreeOrReject(status) {
				uni.showModal({
					title: '温馨提示',
					content: `确定${status === '1' ? '同意': '拒绝'}当前预约信息吗？`,
					success: res => {
						if (res.confirm) {
							uni.showLoading()
							this.$request({
								method: 'POST',
								header: {
									"Content-Type": "application/json"
								},
								data: {
									id: this.id,
									status 
								},
								url: '/appoint/examine',
							}).then(() => {
								this.$refs.uNotify.show({
									top: 10,
									type: 'success',
									message: '审核成功',
									duration: 1000 * 1,
									safeAreaInsetTop: true
								})
								this.loadData()
							}).finally(uni.hideLoading())
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			loadData() {
				const currentDate =  formatDate(new Date().getTime())
				console.log("当前日期：",currentDate)
				uni.showLoading()
				this.$request({
					url: '/appoint/detail?id=' + this.id
				}).then(res => {
					console.log("res===", res)
					if (res.data) {
						if (res.data.status === '0' && this.openid === res.data.visitedOpenid && currentDate <= res.data.appointTime.substr(0,10)) {
							res.data.visitedNameLabel = desensitizeName(res.data.visitedName)
							this.form = res.data
							this.showEmpty = false
						} else {
							//数据存在，跳转详情界面
							// this.showEmpty = true
							uni.navigateTo({
								url: '/pages/reservation/reservationDetail?id=' + this.id
							})
						}
					}else{
						this.showEmpty = true
					}
					this.show = true
				}).catch((e) => {
					console.log("请求异常==============",e)
					this.showEmpty = true
				}).finally(()=>{
					uni.hideLoading()
					this.show = true
				})
			},
			submit() {
				this.$refs.uForm1.validate().then(res => {
					this.$refs.uForm2.validate().then(res => {
						console.log("校验通过")
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-placeholder{
		font-size: 12px;
	}
	.empty {
		display: flex;
		justify-content: center;
		background: #f3f3f3;
		width: 100%;
		height: 100vh;
	}

	.add-container {
		width: 100%;
		min-height: 100vh;
		background: #f3f3f3;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;
		// justify-content: center;

		.mg-top30 {
			margin-top: 16rpx;
		}

		.header {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #888888;
			margin-bottom: 16rpx;
			// height: 70rpx;

			.logo {
				margin-left: -48rpx;
				height: 40rpx;
				width: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				border: 1px solid #3cbfad;
				color: #3cbfad;
				text-align: center;
				border-radius: 50%
			}

			.title {
				// height: 40rpx;
				// line-height: 40rpx;
				margin-left: 10rpx;
				// margin-bottom: 20rpx;
			}

		}

		.submit {
			display: flex;
			width: 92%;
			gap: 90rpx;
			margin-top: 40rpx;
			margin-bottom: 60rpx;
		}

		.form-container {
			z-index: 999;
			background: #fff;
			border-radius: 10rpx;
			z-index: 99;
			padding: 20rpx 40rpx 30rpx 60rpx;
			width: 80%;
		}



	}
</style>